<template>
	<view class="chatInterface" @contextmenu.prevent="">
		<scroll-view scroll-y="true" @click="dibuxiaoshi" :scroll-into-view="scrollInto" :style="'height:'+ping_h+'px'">
			<view class="scroll-view">
				<image v-if="history.loading" class="history-loaded" src="/static/images/loading.svg" />
				<view v-else :class="history.allLoaded ? 'history-loaded':'load'" @click="loadHistoryMessage(false)">
					<view>{{ history.allLoaded ? '已经没有更多的历史消息' : '点击获取历史消息' }}</view>
				</view>
				<checkbox-group @change="selectMessages">
					<!--消息记录-->
					<view v-for="(message,index) in history.messages" :key="message.messageId"
						:id="'s'+message.messageId">
						<!--时间显示，类似于微信，隔5分钟不发言，才显示时间-->
						<view class="time-lag">
							{{ renderMessageDate(message, index) }}
						</view>
						<view class="message-recalled" v-if="message.recalled">
							<view v-if="message.recaller.data.name=='系统'">系统撤回了一条消息</view>
							<view v-else-if="message.senderId !== userInfo.username">{{ friend.name }}撤回了一条消息</view>
							<view v-else class="message-recalled-self">
								<view>你撤回了一条消息</view>
								<span v-if="message.type === 'text' && Date.now()-message.timestamp< 60 * 1000 "
									@click="editRecalledMessage(message.payload.text)">重新编辑</span>
							</view>
						</view>
						<view class="message-item" v-else>
							<view class="message-item-checkbox">
								<checkbox v-show="messageSelector.visible && message.status !== 'sending'"
									:value="message.messageId" :checked="messageSelector.messages.includes(message)" />
							</view>
							<view class="message-item-content"
								:class="[message.senderId ===  userInfo.username ? 'self' : 'other']">
								<view class="avatar">
									<image
										:src="message.senderId === userInfo.username? userInfo.avatar : avatar">
									</image>
								</view>

								<view class="content" @click.right="showActionPopup(message)"
									@longpress="showActionPopup(message)">
									<view class="message-payload">
										<b class="pending" v-if="message.status === 'sending'"></b>
										<b class="send-fail" v-if="message.status === 'fail'"></b>
										<view v-if="message.type === 'text'" v-html="renderTextMessage(message)"></view>
										<image v-if="message.type === 'image'" :data-url="message.payload.url"
											:src="message.payload.url"
											:style="{height: getImageHeight(message.payload.width,message.payload.height)+'rpx' }"
											class="image-content" mode="heightFix" @click="showImageFullScreen">
										</image>
										<view class="video-snapshot" v-if="message.type === 'video'"
											:data-url="message.payload.video.url" @click="playVideo">
											<image :src="message.payload.thumbnail.url"
												:style="{height: getImageHeight(message.payload.thumbnail.width,message.payload.thumbnail.height)+'rpx' }"
												mode="heightFix"></image>
											<view class="video-play-icon"></view>
										</view>
										<view class="file-content" v-if="message.type === 'file'">
											<view class="file-info">
												<span class="file-name">{{ message.payload.name }}</span>
												<span
													class="file-size">{{ (message.payload.size / 1024).toFixed(2) }}KB</span>
											</view>
											<image class="file-img" src="/static/images/file-icon.png"></image>
										</view>
										<view v-if="message.type ==='audio'" class="audio-content"
											@click="playAudio(message)">
											<view class="audio-facade"
												:style="{width:Math.ceil(message.payload.duration)/1000+50 + 'px'}">
												<view class="audio-facade-bg"
													:class="{'play-icon':audioPlayer.playingMessage && audioPlayer.playingMessage.messageId === message.messageId}">
												</view>
												<view>{{Math.ceil(message.payload.duration) || 1}}<span>"</span></view>
											</view>
										</view>
										<view v-if="message.type === 'order'" class="order-content"
											@click="xiadan(message.payload.goodsid,message.receiverId)">
											<!-- <view class="order-id">订单号：{{ message.payload.goodsid }}</view> -->
											<view class="order-body">
												<view class="order-img"
													:style="{'background-image':`url(${ message.payload.url })`}">
												</view>
												<view>
													<view class="order-name">{{ message.payload.goodsname }}</view>
													<view class="order-info">
														<view class="order-count">点击下单</view>
													</view>
												</view>
											</view>
											<u-popup :show="showPopup" mode="center" @close="showPopup = false"
												:customStyle="{'borderRadius': '20rpx'}">
												<view class="popup">
													<view class="titles">是否下单</view>
													<image src="/static/images/home/close.png" mode="widthFix"
														@click="showPopup = false"></image>
													<text class="content">请务必先与卖家沟通好交易时间和方式，验货后完成交易，一旦付款，不支持退款退货</text>
													<view class="btns">
														<u-button type="primary" size="small" shape="circle" text="取消"
															color="#C4BCDF" @click="showPopup = false"></u-button>
														<u-button type="primary" size="small" shape="circle" text="确认下单"
															color="#7780C8" @click="orderClick"></u-button>
													</view>
												</view>
											</u-popup>
										</view>
									</view>
									<view v-if="message.senderId === userInfo.username"
										:class="message.read ?'message-read':'message-unread'">
										<view v-if="message.status === 'success'">{{ message.read ? '已读' : '未读' }}
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</checkbox-group>
			</view>
		</scroll-view>
		<!-- 语音遮罩层 -->
		<view class="voice-mask" v-show="mask">
			<!-- 底部区域 -->
			<view class="voice-send">
				<!-- 取消和转文字图标 -->
				<view class="voice-middle-wrapper">
					<!-- 取消 -->
					<view class="voice-left-wrapper">
						<view class="cancel-del" :class="{delTip:needCancel}">松开 取消</view>
						<view class="voice-middle-inner close" :class="{bigger:needCancel}">
							<image src="/static/images/quxiao.png" class="close-icon"></image>
						</view>
					</view>
					<!-- 转文字 -->
					<view class="voice-middle-inner to-text">

						<image src="/static/images/zhuan.png" class="wenimg"></image>
					</view>
					<view class="send-tip" :class="{sendTipNone:needCancel}">松开 发送</view>
				</view>
				<!-- 底部语音按钮 -->
				<view class="mask-bottom">
					<uni-icons type="mic-filled" class="img" size="40"></uni-icons>
				</view>
			</view>
		</view>

		<view class="action-box" v-show="!mask" :style="{paddingBottom:jian_h + 'px'}"
			v-if="!videoPlayer.visible && !messageSelector.visible">
			<view class="action-top">
				<view @click="switchAudioKeyboard">
					<image class="more" v-if="audio.visible" src="/static/images/jianpan.png"></image>
					<image class="more" v-else src="/static/images/audio.png"></image>
				</view>
				<view v-if="audio.visible" class="record-input" @longpress="onRecordStart" @touchend="onRecordEnd"
					@tap="onRecordStart" @touchmove="handleTouchMove">
					{{ audio.recording ? '松开发送' : '按住录音' }}
				</view>

				<!-- GoEasyIM最大支持3k的文本消息，如需发送长文本，需调整输入框maxlength值 -->

				<input v-else :adjust-position="false" :focus="ishuo" @click="huoqujiaodian" @focus="huoqujiaodian"
					@blur="shiqujiaodian" @confirm="sendTextMessage()" :confirm-hold="true" v-model="text"
					class="consult-input" maxlength="700" type="text" />


				<view @click="switchEmojiKeyboard">
					<image class="more" v-if="emoji.visible" src="/static/images/jianpan.png"></image>
					<image class="more" v-else src="/static/images/emoji.png"></image>
				</view>
				<view>
					<image @click="showOtherTypesMessagePanel()" class="more" src="/static/images/more.png" />
				</view>
				<view v-if="text" class="send-btn-box">
					<text class="btn" @click="sendTextMessage()">发送</text>
					<!-- <text class="btn" @touchend.prevent="sendTextMessage()">发送</text> -->
				</view>
			</view>
			<!--展示表情列表-->
			<view class="action-bottom action-bottom-emoji" v-if="emoji.visible">
				<image class="emoji-item" v-for="(emojiItem, emojiKey, index) in emoji.map" :key="index"
					:src="emoji.url + emojiItem" @click="chooseEmoji(emojiKey)"></image>
			</view>
			<!--其他类型消息面板-->
			<view v-if="otherTypesMessagePanelVisible" class="action-bottom">
				<view class="more-icon">
					<image @click="sendImageMessage()" class="operation-icon" src="/static/images/picture.png"></image>
					<view class="operation-title">图片</view>
				</view>
				<view class="more-icon">
					<image @click="sendVideoMessage()" class="operation-icon" src="/static/images/video.png"></image>
					<view class="operation-title">视频</view>
				</view>
				<view class="more-icon">
					<image @click="jubao()" class="operation-icon" src="/static/images/icon-report.png"></image>
					<view class="operation-title">投诉</view>
				</view>
			</view>
		</view>
		<view class="action-popup" @touchmove.stop.prevent v-if="actionPopup.visible">
			<view class="layer"></view>
			<view class="action-list">
				<view class="action-item" @click="deleteSingleMessage">删除</view>
				<view class="action-item" v-if="actionPopup.recallable" @click="recallMessage">撤回</view>
				<view class="action-item" @click="showCheckBox">多选</view>
				<view class="action-item" @click="hideActionPopup">取消</view>
			</view>
		</view>
		<view class="messageSelector-box" v-if="messageSelector.visible">
			<image class="messageSelector-btn" @click="deleteMultipleMessages" src="/static/images/delete.png"></image>
		</view>
		<view class="record-loading" v-if="audio.recording"></view>
		<video v-if="videoPlayer.visible" :src="videoPlayer.url" id="videoPlayer"
			@fullscreenchange="onVideoFullScreenChange"></video>
	</view>
</template>



<script>
	import {
		formatProducDetail
	} from '../../utils/common'
	import EmojiDecoder from '../../lib/EmojiDecoder';
	import restApi from '../../lib/restapi';
	import {
		formatDate
	} from '../../lib/utils';

	const IMAGE_MAX_WIDTH = 200;
	const IMAGE_MAX_HEIGHT = 150;
	const recorderManager = uni.getRecorderManager();


	// var plugin = requirePlugin("WechatSI")
	// let manager = plugin.getRecordRecognitionManager()
	export default {
		name: 'privateChat',
		data() {
			const emojiUrl = 'https://imgcache.qq.com/open/qcloud/tim/assets/emoji/';
			const emojiMap = {
				'[么么哒]': 'emoji_3@2x.png',
				'[乒乓]': 'emoji_4@2x.png',
				'[便便]': 'emoji_5@2x.png',
				'[信封]': 'emoji_6@2x.png',
				'[偷笑]': 'emoji_7@2x.png',
				'[傲慢]': 'emoji_8@2x.png'
			};
			return {
				//聊天文本框
				text: '',
				jian_h: 10,
				ishuo: false,
				ping_h: uni.getSystemInfoSync().windowHeight - 73 - 10,
				zhuan: false,
				scrollInto: "",
				ishua: false,
				dibu: false,
				mask: false,
				shows: false,
				endOne: '',
				inputBottom: 0,
				showPopup: false,
				friend: null,
				to: {}, // 作为createMessage的参数
				userInfo: uni.getStorageSync('userInfo') || null,
				id: '', //对象
				nickname: '', //对象网名
				avatar: '', //对象头像
				type: '',
				receiverId: '',
				//定义表情列表
				emoji: {
					url: emojiUrl,
					map: emojiMap,
					visible: false,
					decoder: new EmojiDecoder(emojiUrl, emojiMap),
				},
				//是否展示‘其他消息类型面板’
				otherTypesMessagePanelVisible: false,
				orderList: {
					orders: [],
					visible: false
				},
				history: {
					messages: [],
					allLoaded: false,
					loading: false
				},
				audio: {
					startTime: null,
					//语音录音中
					recording: false,
					//录音按钮展示
					visible: false
				},
				audioPlayer: {
					innerAudioContext: null,
					playingMessage: null,
					obeyMuteSwitch: false,
				},
				videoPlayer: {
					visible: false,
					url: '',
					context: null
				},
				// 展示消息删除弹出框
				actionPopup: {
					visible: false,
					message: null,
					recallable: false,
				},
				// 消息选择
				messageSelector: {
					visible: false,
					messages: []
				},

				goodsid: '',
				type: '',
				goodsname: '',
				goodsdetail: '',
				dealstate: '',
				imagelist: [],
				image: '',
				userid: '',
				timer: '',
				length: '',
				startX: '',
				startY: '',
				needCancel: false,

				mediaUrl: uni.$http.mediaUrl,
				// goodsgt: '',

				login_code: '',
				openid: '',
				access_token: '',
				voicePath: '',
				voiceState: "你可以这样说...",
				num: 1,
				gao: 1,
				juli: ''
			}
		},
		onLoad(options) {
			uni.onKeyboardHeightChange((res) => {
				console.log(res.height)
				this.jian_h = 10 + res.height
				if (this.emoji.visible) {
					this.ping_h = uni.getSystemInfoSync().windowHeight - 245;

				} else {
					this.ping_h = uni.getSystemInfoSync().windowHeight - this.jian_h - 73;

				}
			})

			// console.log('privateChat-onLoad-options:',options)
			this.goodsid = options.goodsid
			this.id = options.id
			this.type = this.GoEasy.IM_SCENE.PRIVATE
			// console.log(this.type)
			// 拿着对象的信息去查最新的网名和头像
			this.getinfo(options)

			this.initialGoEasyListeners();
			// 语音播放器
			this.initialAudioPlayer();
			// 录音监听器
			this.initRecorderListeners();
			// console.log(this.history)
			// this.initRecord();



		},
		onShow() {
			self = this
			this.userid = uni.getStorageSync('userid')

			uni.login({
				provider: 'weixin',
				async success(res) {
					self.login_code = res.code;
					const postmsg = {
						login_code: self.login_code
					}
					const {
						data: ress
					} = await uni.$http.post('wxGetOpenId/', postmsg)
					if (ress.code == 200) {
						self.openid = ress.data.openid
						self.access_token = ress.data.access_token
					} else {
						console.log(ress.msg)
					}
				}
			})

			if (this.goEasy.getConnectionStatus() === 'disconnected') {
				this.connectGoEasy(); //连接goeasy
				// this.subscribeGroup(); //建立连接后，就应该订阅群聊消息，避免漏掉
			}
			this.emoji.visible = false;
			// console.log(this.history)


		},
		onReady() {
			// 如果商品id不为空,证明从商品那里跳转过来的,则需要发送一条商品信息
			if (this.goodsid !== '' & this.goodsid !== undefined) {
				console.log('需要发送订单')
				console.log(this.goodsid)
				// 这里应该先加载历史消息.然后发送订单,才能达到拼接的效果
				this.loadHistoryMessage(true);

				this.getGoodsDetail()
			} else {
				this.loadHistoryMessage(true);

			}
			this.videoPlayer.context = uni.createVideoContext('videoPlayer', this);
			// https://uniapp.dcloud.io/api/ui/navigationbar?id=setnavigationbartitle

			// console.log(this.history)
		},
		onPullDownRefresh(e) {
			this.loadHistoryMessage(false);
		},
		onUnload() {
			uni.offKeyboardHeightChange()
			//退出聊天页面之前，清空监听器
			this.goEasy.im.off(this.GoEasy.IM_EVENT.PRIVATE_MESSAGE_RECEIVED, this.onMessageReceived);
			this.goEasy.im.off(this.GoEasy.IM_EVENT.MESSAGE_DELETED, this.onMessageDeleted);
		},
		methods: {
			formatProducDetail,
			dibuxiaoshi() {
				console.log('xiaoshi')
				this.emoji.visible = false
				this.otherTypesMessagePanelVisible = false
				this.ping_h = uni.getSystemInfoSync().windowHeight - 73 - 10;


			},
			shiqujiaodian(e) {
				console.log('shi')
				if (this.emoji.visible) {
					this.ping_h = uni.getSystemInfoSync().windowHeight - 245;

				} else {
					this.ping_h = uni.getSystemInfoSync().windowHeight - 73 - 10;

				}
				console.log(this.ping_h)
				// this.ping_h=null

			},
			// 获取焦点
			huoqujiaodian(e) {
				this.emoji.visible = false

			},
			// 开始语音
			onRecordStart(e) {
				try {
					// 更多配置参考uniapp：https://uniapp.dcloud.net.cn/api/media/record-manager.html#getrecordermanager
					recorderManager.start({
						duration: 60000 // 指定录音的时长,单位 ms
					});
					// manager.start({
					// 	duration: 60000,
					// 	lang: "zh_CN"
					// })

					this.needCancel = false
					this.mask = true;
					this.zhuan = false
					this.audio.recording = true
					this.startX = e.touches[0].pageX;
					this.startY = e.touches[0].pageY;
				} catch (e) {
					uni.showModal({
						title: '录音错误',
						content: '请在app和小程序端体验录音，Uni官方明确H5不支持getRecorderManager, 详情查看Uni官方文档'
					});
				}
			},
			// 原地手指松开结束语音
			onRecordEnd() {
				try {
					// 这里需要判断有没有滑动取消
					this.mask = false;
					this.audio.recording = false
					clearInterval(this.timer);
					recorderManager.stop();
					// manager.stop();

				} catch (e) {
					console.log(e);
				}
			},
			// 语音滑动取消
			handleTouchMove(e) {
				if (this.startX - e.touches[0].pageX > 14 && this.startY - e.touches[0].pageY > 50) {
					console.log('滑动取消')
					this.zhuan = false;
					this.needCancel = true;

				} else if (e.touches[0].pageX - this.startX > 14 && this.startY - e.touches[0].pageY > 50) {

					// console.log('准备翻译')
					this.needCancel = false;
					this.zhuan = true;
					
					
				} else {
					this.needCancel = false;
				}
			},
			/**
			 * 初始化语音识别回调
			 * 绑定语音播放开始事件
			 */
			initRecord() {
				manager.onStart = function(res) {

					self.audio.startTime = Date.now();

				};

				// 识别结束事件
				manager.onStop = (res) => {
					console.log(res)
					// this.audio.visible = false
					this.mask = false;


					if (this.needCancel) {
						return
					}
					let endTime = Date.now();
					let duration = endTime - this.audio.startTime;


					this.voicePath = res.tempFilePath;
					this.voiceState = res.result;
					if (this.voiceState == '') {
						console.log('没有说话')
						this.endOne = '周围太安静啦~再试试~';
						return
					}
					// 判断对方是不是点了语音转文字
					if (this.zhuan) {
						this.audio.visible = false
						this.text = res.result
						this.zhuan = false;
						return
					}

					// 如果没取消那就把语音发出去
					if (!this.needCancel) {
						let endTime = Date.now();
						this.audio.recording = false;
						let duration = endTime - this.audio.startTime;
						if (duration < 1000) {
							uni.showToast({
								icon: 'error',
								title: '录音时间太短',
								duration: 500
							});
							return;
						}
						// 超过六十不发送
						if (duration > 60000) {
							uni.showToast({
								icon: 'none',
								title: '录音时间不可以超过60s谢谢',
								duration: 1000
							});
							return;
						}
						// self.dibu=false
						res.duration = duration;
						this.goEasy.im.createAudioMessage({
							to: this.to,
							file: res,
							notification: {
								title: this.userInfo.nickname + '发来一段语音',
								body: '[语音消息]' // 字段最长 50 字符
							},
							onProgress: function(progress) {
								console.log(progress)
							},
							onSuccess: (message) => {
								this.sendMessage(message);
								this.needCancel = false
							},
							onFailed: (e) => {
								console.log('error :', e);
							}
						});

					}

				}

				//有新的识别内容返回，则会调用此事件
				manager.onRecognize = (res) => {
					if (this.needCancel) {
						this.audio.visible = false
						return
					}
					console.log(res)
					this.voiceState = res.result;
				}
				// 识别错误事件
				manager.onError = (res) => {
					if (this.needCancel) {
						this.mask = false;

						this.audio.visible = false
						return
					}
					console.log(res)
					this.audio.recording = false
					this.mask = false
					// 假如发生错误了不报错，直接终止
					uni.showToast({
						title: '请重试',
						icon: 'error',
						duration: 1000, //持续时间为 2秒
					})
					this.needCancel = true
					manager.stop()


				}
			},
			initRecorderListeners() {
				// 监听录音开始
				recorderManager.onStart(() => {
					console.log('开始录音')
					this.audio.startTime = Date.now();
				});
				//录音结束后，发送
				recorderManager.onStop((res) => {
					console.log('结束录音')
					
					console.log(res)
					// this.audio.visible = false
					this.mask = false;
					if (this.needCancel) {
						return
					}
					if (this.zhuan) {
						uni.showToast({
							title: '语音转文字功能开小差啦>_<',
							icon: 'none',
							duration: 1000, //持续时间为 2秒
						})
						return
					}
					
					
					// 通过关键字判断要不要把录的音发送过去
					if (!this.needCancel) {
						let endTime = Date.now();
						this.audio.recording = false;
						let duration = endTime - this.audio.startTime;
						if (duration < 1000) {
							uni.showToast({
								icon: 'error',
								title: '录音时间太短啦~',
								duration: 1000
							});
							return;
						}
						// 超过六十不发送
						if (duration > 60000) {
							uni.showToast({
								icon: 'none',
								title: '录音时间不可以超过60s谢谢',
								duration: 1000
							});
							return;
						}
						
						res.duration = duration;
						this.goEasy.im.createAudioMessage({
							to: this.to,
							file: res,
							notification: {
								title: this.userInfo.nickname + '发来一段语音',
								body: '[语音消息]' // 字段最长 50 字符
							},
							onProgress: function(progress) {
								console.log(progress)
							},
							onSuccess: (message) => {
								this.sendMessage(message);
								this.needCancel = false
							},
							onFailed: (e) => {
								console.log('error :', e);
							}
						});

					}
				});
				// 监听录音报错
				recorderManager.onError((res) => {
					console.log(res)
					this.audio.recording = false;
					recorderManager.stop()
					// recorderManager.stop();
					// 这里报错的原因是手滑碰到苹果下方的小黑条导致监控终端,实际上语音还是可以发送的,不需要报错

					// uni.showToast({
					// 	icon: 'error',
					// 	title: '录音失败,请检查麦克风权限',
					// 	duration: 1000
					// });
				})
			},

			onScroll(e) {

				// /l 获取 scroll-view 的滚动高度和视口高度
				const {
					scrollTop,
					scrollHeight,
					height
				} = e.detail;
				console.log(e.detail)
				// /l 如果滚动到了底部，则将 scrollTop 设置为最大值
				if (scrollTop + height >= scrollHeight) {
					this.$nextTick(() => {
						uni.pageScrollTo({
							scrollTop: 99999,
							duration: 300,
						});
					});
				}
			},

			// fanyi() {
			// 	if (this.num == 1) {
			// 		console.log(this.voicePath);
			// 		this.endOne = this.voiceState
			// 		this.num = this.num + 1
			// 		uni.showToast({
			// 			title: '转换成功',
			// 			icon: 'success',
			// 			duration: 2000, //持续时间为 2秒
			// 		})
			// 	} else {
			// 		uni.showToast({
			// 			title: '文字已翻译，请勿重复点击',
			// 			icon: 'error',
			// 			duration: 2000, //持续时间为 2秒
			// 		})
			// 	}
			// },
			inputFocus(e) {
				console.log(e)
				this.inputBottom = e.detail.height
				uni.pageScrollTo({
					scrollTop: this.inputBottom,
					duration: 0,
				})

			},
			async xiadan(goodsid, receiverId) {
				this.showPopup = true
				this.receiverId = receiverId
				this.goodsid = goodsid
				const postmsg = {
					goodsid: goodsid,
					userid: uni.getStorageSync('userid'),
				}
				const {
					data: res
				} = await uni.$http.post('getGoodsDetail/', postmsg)
				if (res.code == 200) {
					console.log(res.data)
					this.type = res.data.type

				} else {
					uni.showToast({
						icon: 'error',
						title: res.msg
					})
					console.log(res.msg)
				}
			},
			connectGoEasy() {
				// uni.showLoading();
				this.goEasy.connect({
					id: this.userInfo.username,
					data: {
						name: this.userInfo.nickname,
						avatar:  this.userInfo.avatar
					},
					onSuccess: () => {
						console.log('GoEasy connect successfully.')
					},
					onFailed: (error) => {
						console.log('Failed to connect GoEasy, code:' + error.code + ',error:' +
							error
							.content);
					},
					onProgress: (attempts) => {
						console.log('GoEasy is connecting', attempts);
					}
				});
			},
			async getinfo(options) {
				// console.log(options)
				const userInfo = {
					username: options.id,
				}
				const {
					data: res
				} = await uni.$http.post('getMyInfo/', userInfo)
				if (res.code == 200) {
					this.nickname = res.data.nickname
					this.avatar =  res.data.avatar
				} else {
					uni.showToast({
						icon: 'error',
						title: res.msg
					})
				}
				//聊天对象
				this.friend = {
					id: options.id, //对象手机号
					name: this.nickname,
					avatar: this.avatar
				};
				// console.log('privateChat-onLoad-friend:',this.friend)

				this.to = {
					id: this.friend.id,
					type: this.GoEasy.IM_SCENE.PRIVATE,
					data: {
						name: this.friend.name,
						avatar: this.friend.avatar
					}
				};
				// console.log('privateChat-onLoad-to:',this.to)
				uni.setNavigationBarTitle({
					title: this.friend.name
				});

			},

			async getGoodsDetail() {
				const postmsg = {
					goodsid: this.goodsid,
					userid: uni.getStorageSync('userid'),

				}
				const {
					data: res
				} = await uni.$http.post('getGoodsDetail/', postmsg)
				if (res.code == 200) {
					console.log(res.data)
					this.goodsid = res.data.goodsid
					this.type = res.data.type
					this.goodsname = res.data.goodsname
					this.dealstate = res.data.dealstate
					this.goodsdetail = res.data.goodsdetail
					this.imagelist = res.data.imagelist
					this.image = this.imagelist[0]
					this.sendCustomMessage()



				} else {
					uni.showToast({
						icon: 'error',
						title: res.msg
					})
					console.log(res.msg)
				}
			},
			jubao() {
				uni.navigateTo({
					url: '/pages/mine/complain?user=' + this.friend.id
				});

			},
			sendCustomMessage() {
				var order = {
					goodsid: this.goodsid,
					goodsname: this.goodsname,
					goodsdetail: this.goodsdetail,
					url: this.image
				};
				console.log('准备发送订单')
				this.sendOrderMessage(order)
			},
			async orderClick() {
				if (this.receiverId == this.userInfo.username) {
					uni.showToast({
						icon: 'none',
						title: '老板，这是您的东西',
						duration: 1000
					})
				} else {
					// todo juli 此字段暂时还没有
					// uni.navigateTo({
					// 	url: '/pages/conversations/orderconfirm?goodsid=' + goodsid
					// })
					const postmsg = {
						goodsid: this.goodsid,
						phonebuy: this.userInfo.username
					};
					const {
						data: res
					} = await uni.$http.post('geneOrder/', postmsg)
					if (res.code == 200) {
						uni.showToast({
							icon: 'success',
							title: '下单成功',
							duration: 1000
						})

						setTimeout(() => {
							uni.redirectTo({
								url: '/pages/mine/mypurchase?type=' + Number(this
									.type)
							})
						}, 1000);
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg,
							duration: 2000
						})

					}
				}
			},


			sendMessage(message) {
				this.goEasy.im.sendMessage({
					message: message,
					onSuccess: function(message) {
						console.log('发送成功.', message);
						self.history.messages.push(message);
						self.scrollToBottom();
						if (message.type == 'text') {
							const postmsg = {
								openid: self.openid,
								access_token: self.access_token,
								msg: message.payload.text,
								type: 'liaotian',
								appkey: 'BC-90d3248c480046b3916a77fe66b21ae4',
								senderId: message.senderId,
								avatar: self.userInfo.avatar,
								name: self.userInfo.nickname,
								receiverId: message.receiverId,
								timestamp: message.timestamp,
							}
							self.textMsgCheck(postmsg);

						} else {
							const postmsg = {
								openid: self.openid,
								access_token: self.access_token,
								media_url: message.payload.url,

								appkey: 'BC-90d3248c480046b3916a77fe66b21ae4',
								senderId: message.senderId,
								avatar: self.userInfo.avatar,
								name: self.userInfo.nickname,
								receiverId: message.receiverId,
								timestamp: message.timestamp,

							}
							self.imageMsgCheck(postmsg);
						}
					},
					onFailed: function(error) {
						if (error.code === 507) {
							console.log(
								'发送语音/图片/视频/文件失败，没有配置OSS存储，详情参考：https://docs.goeasy.io/2.x/im/message/media/alioss'
							);
						} else {
							console.log('发送失败:', error);
						}
					}
				});
			},

			async textMsgCheck(postmsg) {
				// console.log('postmsg：',postmsg)
				const {
					data: res
				} = await uni.$http.post('textMsgCheck/', postmsg)
				if (res.code == 200) {
					// console.log(res.msg)
				} else {
					uni.showToast({
						icon: 'error',
						title: "内容违规",
						duration: 2000
					});
					// console.log(res.msg)
				}
			},
			async sendTextMessage(txt) {
				// console.log(txt)
				if (this.text.trim() !== '' && this.text != '') {
					let body = this.text;
					if (this.text.length >= 50) {
						body = this.text.substring(0, 30) + '...';
					}
					this.goEasy.im.createTextMessage({
						text: this.text,
						to: this.to,
						notification: {
							title: this.userInfo.nickname + '发来一段文字',
							body: body
						},
						onSuccess: (message) => {
							this.sendMessage(message);
							setTimeout(() => {
								this.isFocused = true;
							}, 50)
						},
						onFailed: (e) => {
							console.log('error :', e);
						}
					});
				}
				this.text = '';
			},
			sendVideoMessage() {
				uni.chooseVideo({
					success: (res) => {
						this.goEasy.im.createVideoMessage({
							to: this.to,
							file: res,
							notification: {
								title: this.userInfo.nickname +
									'发来一个视频',
								body: '[视频消息]' // 字段最长 50 字符
							},
							onProgress: function(progress) {
								console.log(progress)
							},
							onSuccess: (message) => {
								this.otherTypesMessagePanelVisible =
									false;
								this.sendMessage(message);
							},
							onFailed: (e) => {
								console.log('error :', e);
							}
						});
					}
				})
			},

			async imageMsgCheck(postmsg) {
				// const {
				// 	data: res
				// } = await uni.$http.post('imageMsgCheck/', postmsg)
				// if (res.status == 200) {
				// 	console.log(res.msg)
				// } else {
				// 	console.log(res.msg)
				// }
			},
			sendImageMessage() {
				uni.chooseImage({
					count: 1,
					success: (res) => {
						res.tempFiles.forEach(file => {
							this.goEasy.im.createImageMessage({
								to: this.to,
								file: file,
								notification: {
									title: this.userInfo
										.nickname +
										'发来一张图片',
									body: '[图片消息]' // 字段最长 50 字符
								},
								onProgress: function(
									progress) {
									console.log(
										progress)
								},
								onSuccess: (message) => {
									console.log(
										'sendImageMessage',
										message)
									this.otherTypesMessagePanelVisible =
										false;
									this.sendMessage(
										message);
								},
								onFailed: (e) => {
									console.log(
										'error :',
										e);
								}
							});
						})
					}
				});
			},
			sendOrderMessage(order) {
				//GoEasyIM自定义消息,实现订单发送
				this.goEasy.im.createCustomMessage({
					type: 'order',
					payload: order,
					to: this.to,
					notification: {
						title: this.userInfo.nickname + '发来一个订单',
						body: '[订单消息]'
					},
					onSuccess: (message) => {

						this.otherTypesMessagePanelVisible = false;
						this.sendMessage(message)
						setTimeout(() => {
							this.goEasy.im.createTextMessage({
								text: '您好，请问这个商品还在吗？',
								to: this.to,
								notification: {
									title: this.userInfo.nickname +
										'发来一段文字',
									body: '您好，请问这个商品还在吗？'
								},
								onSuccess: (message) => {
									this.sendMessage(message);
								},
								onFailed: (e) => {
									console.log('error :', e);
								}
							});

						}, 100)
						// 给对方发送订单成功后才发文字



					},
					onFailed: (e) => {
						console.log('error :', e);
					}
				});
				this.orderList.visible = false;
			},
			recordShow(e) {
				var that = this;
				uni.getSetting({
					success(res) {
						// console.log(res.authSetting['scope.record']);
						//判断是否第一次获取录音功能
						if (!res.authSetting['scope.record']) {
							//调用后会立刻弹窗询问用户是否同意授权录音给小程序
							uni.authorize({
								scope: 'scope.record',
								success() {
									// 用户已经同意小程序使用录音功能，后续调用 wx.startRecord 接口不会弹窗询问
									uni.startRecord()
								}
							})
							//判断录音是否是开启状态false没开启就跳转到开启页面
							if (res.authSetting['scope.record'] == false) {
								uni.openSetting({
									success(res) {
										console.log(res.authSetting)
									}
								});
							}
						} else if (res.authSetting['scope.record'] == true) {
							// that.show = true;
							// console.log(e.currentTarget.dataset.id);
							// that.current = e.currentTarget.dataset.id;
						}
					}
				})
			},

			//渲染文本消息，如果包含表情，替换为图片
			//todo:本不需要该方法，可以在标签里完成，但小程序有兼容性问题，被迫这样实现
			renderTextMessage(message) {
				return '<span class="text-content">' + this.emoji.decoder.decode(
					message.payload.text) + '</span>'
			},
			//像微信那样显示时间，如果有几分钟没发消息了，才显示时间
			//todo:本不需要该方法，可以在标签里完成，但小程序有兼容性问题，被迫这样实现
			renderMessageDate(message, index) {
				if (index === 0) {
					return formatDate(message.timestamp)
				} else {
					if (message.timestamp - this.history.messages[index - 1]
						.timestamp > 5 * 60 * 1000) {
						return formatDate(message.timestamp)
					}
				}
				return '';
			},
			initialGoEasyListeners() {
				// 监听私聊消息
				this.goEasy.im.on(this.GoEasy.IM_EVENT.PRIVATE_MESSAGE_RECEIVED, this
					.onMessageReceived);
				//监听消息删除
				this.goEasy.im.on(this.GoEasy.IM_EVENT.MESSAGE_DELETED, this
					.onMessageDeleted);
			},
			onMessageReceived(message) {
				let senderId = message.senderId;
				let receiverId = message.receiverId;
				let friendId = this.userInfo.username === senderId ? receiverId :
					senderId;
				if (friendId === this.friend.id) {
					this.history.messages.push(message);
					//聊天时，收到消息标记为已读
					this.markPrivateMessageAsRead();
					//收到新消息，是滚动到最底部
					this.scrollToBottom();
				}
			},
			onMessageDeleted(deletedMessages) {
				deletedMessages.forEach(message => {
					let senderId = message.senderId;
					let receiverId = message.receiverId;
					let friendId = this.userInfo.username === senderId ?
						receiverId : senderId;
					if (friendId === this.friend.id) {
						let index = this.history.messages.indexOf(message);
						if (index > -1) {
							this.history.messages.splice(index, 1);
						}
					}
				});
			},
			initialAudioPlayer() {
				this.audioPlayer.innerAudioContext = uni.createInnerAudioContext();
				this.audioPlayer.innerAudioContext.obeyMuteSwitch = false;
				this.audioPlayer.innerAudioContext.onEnded(() => {
					this.audioPlayer.playingMessage = null;
				});
				this.audioPlayer.innerAudioContext.onStop(() => {
					this.audioPlayer.playingMessage = null;
				});
			},

			checkRecordPermission() {
				wx.getSetting({
					success(res) {
						if (!res.authSetting['scope.record']) {
							wx.authorize({
								scope: 'scope.record',
								success() {
									// 用户已同意授权
									console.log('用户已同意授权')
								},
								fail() {
									// 用户拒绝了授权
									console.log('用户拒绝了授权')
									wx.showModal({
										title: '提示',
										content: '需要获取录音权限，请点击确定进入设置页面进行授权。',
										showCancel: false,
										success(res) {
											if (res.confirm) {
												wx.openSetting({
													success(
														res
													) {
														console
															.log(
																res
																.authSetting
															)
														// 用户在设置页面设置了录音权限
														if (res
															.authSetting[
																'scope.record'
															]
														) {
															console
																.log(
																	'用户在设置页面设置了录音权限'
																)
														} else {
															console
																.log(
																	'用户在设置页面未设置录音权限'
																)
														}
													}
												})
											}
										}
									})
								}
							})
						} else {
							// 已经有录音权限
							console.log('已经有录音权限')
						}
					}
				})
			},




			/**
			 * 核心就是设置高度，产生明确占位
			 *
			 * 小  (宽度和高度都小于预设尺寸)
			 *    设高=原始高度
			 * 宽 (宽度>高度)
			 *    高度= 根据宽度等比缩放
			 * 窄  (宽度<高度)或方(宽度=高度)
			 *    设高=MAX height
			 *
			 * @param width,height
			 * @returns number
			 */
			getImageHeight(width, height) {
				if (width < IMAGE_MAX_WIDTH && height < IMAGE_MAX_HEIGHT) {
					return height * 2;
				} else if (width > height) {
					return (IMAGE_MAX_WIDTH / width * height) * 2;
				} else if (width === height || width < height) {
					return IMAGE_MAX_HEIGHT * 2;
				}
			},

			showActionPopup(message) {
				const MAX_RECALLABLE_TIME = 3 * 60 * 1000; //3分钟以内的消息才可以撤回
				this.messageSelector.messages = [message];
				if ((Date.now() - message.timestamp) < MAX_RECALLABLE_TIME && message
					.senderId === this.userInfo
					.username && message.status === 'success') {
					this.actionPopup.recallable = true;
				} else {
					this.actionPopup.recallable = false;
				}
				this.actionPopup.visible = true;
			},
			hideActionPopup() {
				this.actionPopup.visible = false;
				this.actionPopup.message = null;
			},
			deleteSingleMessage() {
				uni.showModal({
					content: '确认删除？',
					success: (res) => {
						this.actionPopup.visible = false;
						if (res.confirm) {
							this.deleteMessage();
						}
					},
				})
			},
			deleteMultipleMessages() {
				if (this.messageSelector.messages.length > 0) {
					uni.showModal({
						content: '确认删除？',
						success: (res) => {
							this.messageSelector.visible = false;
							if (res.confirm) {
								this.deleteMessage();
							}
						},
					})
				}
			},
			deleteMessage() {
				this.goEasy.im.deleteMessage({
					messages: this.messageSelector.messages,
					onSuccess: (result) => {
						this.messageSelector.messages.forEach(message => {
							let index = this.history.messages
								.indexOf(message);
							if (index > -1) {
								this.history.messages.splice(index,
									1);
							}
						});
						this.messageSelector.messages = [];
					},
					onFailed: (error) => {
						console.log('error:', error);
					}
				});
			},
			recallMessage() {
				this.actionPopup.visible = false;
				this.goEasy.im.recallMessage({
					messages: this.messageSelector.messages,
					onSuccess: () => {
						console.log('撤回成功');
					},
					onFailed: (error) => {
						console.log('撤回失败,error:', error);
					}
				});
			},
			editRecalledMessage(text) {
				if (this.audio.visible) {
					this.audio.visible = false;
				}
				this.text = text;
			},
			showCheckBox() {
				this.messageSelector.messages = [];
				this.messageSelector.visible = true;
				this.actionPopup.visible = false;
			},
			selectMessages(e) {
				const selectedMessageIds = e.detail.value;
				let selectedMessages = [];
				this.history.messages.forEach(message => {
					if (selectedMessageIds.includes(message.messageId)) {
						selectedMessages.push(message);
					}
				})
				this.messageSelector.messages = selectedMessages;
			},
			loadHistoryMessage(scrollToBottom) { //历史消息
				this.history.loading = true;
				let lastMessageTimeStamp = null;
				// 只有点击更多消息的时候这个地方才有值,刚进来只能是空
				let lastMessage = this.history.messages[0];
				if (lastMessage) {
					lastMessageTimeStamp = lastMessage.timestamp;
				}
				this.goEasy.im.history({
					userId: this.id,
					lastTimestamp: lastMessageTimeStamp,
					limit: 10,
					onSuccess: (result) => {
						uni.stopPullDownRefresh();
						this.history.loading = false;
						let messages = result.content;
						console.log(messages)

						if (messages.length === 0) {
							this.history.allLoaded = true;
						} else {
							if (lastMessageTimeStamp) {
								this.history.messages = messages.concat(
									this.history.messages);
							} else {
								this.history.messages = messages;
							}
							if (messages.length < 10) {
								this.history.allLoaded = true;
							}
							if (scrollToBottom) {
								this.scrollToBottom();
								//收到的消息设置为已读
								this.markPrivateMessageAsRead();
							}
							// this.zidongdaodi()

						}
					},
					onFailed: (error) => {
						//获取失败
						console.log('获取历史消息失败:', error);
						uni.stopPullDownRefresh();
						this.history.loading = false;
					}
				});
			},
			//语音录制按钮和键盘输入的切换
			switchAudioKeyboard() {
				this.emoji.visible =false

				this.ishua = !this.ishua;
				this.audio.visible = !this.audio.visible;
				// this.recordShow()
				this.checkRecordPermission()

				// if (uni.authorize) {
				// 	uni.authorize({
				// 		scope: 'scope.record',
				// 		success: () => {
				// 			console.log('同意')
				// 		},
				// 		fail: () => {
				// 			uni.showModal({
				// 				title: '获取录音权限失败',
				// 				content: '请先授权才能发送语音消息！'
				// 			});
				// 			// 然后弹框授权

				// 		}
				// 	});
				// }
			},


			showImageFullScreen(e) {
				let imagesUrl = [e.currentTarget.dataset.url];
				uni.previewImage({
					urls: imagesUrl
				});
			},
			playVideo(e) {
				this.videoPlayer.visible = true;
				this.videoPlayer.url = e.currentTarget.dataset.url;
				this.$nextTick(() => {
					this.videoPlayer.context.requestFullScreen({
						direction: 0
					});
					this.videoPlayer.context.play();
				});
			},
			playAudio(audioMessage) {
				let playingMessage = this.audioPlayer.playingMessage;
				if (playingMessage) {
					this.audioPlayer.innerAudioContext.stop();
					// 如果点击的消息正在播放，就认为是停止播放操作
					if (playingMessage === audioMessage) {
						return;
					}
				}
				console.log(audioMessage)

				this.audioPlayer.playingMessage = audioMessage;
				this.audioPlayer.innerAudioContext.src = audioMessage.payload.url;
				this.audioPlayer.innerAudioContext.play();
			},
			onVideoFullScreenChange(e) {
				//当退出全屏播放时，隐藏播放器
				if (this.videoPlayer.visible && !e.detail.fullScreen) {
					this.videoPlayer.visible = false;
					this.videoPlayer.context.stop();
				}
			},
			messageInputFocusin() {
				this.otherTypesMessagePanelVisible = false;
				this.emoji.visible = false;
			},
			switchEmojiKeyboard() {
				this.audio.visible=false
				this.emoji.visible = !this.emoji.visible;
				if (this.emoji.visible) {
					this.ping_h = uni.getSystemInfoSync().windowHeight - 245;
					// this.$nextTick(() => {
					// 	this.scrollToBottom();
					// });

				} else {
					this.ping_h = uni.getSystemInfoSync().windowHeight - 73 - 10;
					// this.$nextTick(() => {
					// 	this.scrollToBottom();
					// });

				}
				if (this.emoji.visible) {
					this.ishuo = false
				} else {
					this.ishuo = true
				}


				this.otherTypesMessagePanelVisible = false;
				this.scrollToBottom();
			},
			showOtherTypesMessagePanel() {
				this.otherTypesMessagePanelVisible = !this
					.otherTypesMessagePanelVisible;
				this.emoji.visible = false;
				this.scrollToBottom();
			},
			chooseEmoji(emojiKey) {
				this.text += emojiKey;
			},
			// showOrderMessageList() {
			// 	this.orderList.orders = restApi.getOrderList();
			// 	this.orderList.visible = true;
			// },
			hideOrderMessageList() {
				this.orderList.visible = false;
			},
			scrollToBottom() {
				this.scrollInto = 's' + this.history.messages[this.history.messages.length - 1].messageId

				// 页面滑动已经失效.用页内滑动
				console.log('hua')
				// this.$nextTick(() => {
				// 	uni.pageScrollTo({
				// 		scrollTop: 2000000,
				// 		duration: 0
				// 	});
				// });
			},
			markPrivateMessageAsRead() {
				console.log(this.id)
				console.log(this.type)
				this.goEasy.im.markMessageAsRead({
					id: this.id,
					type: this.type,
					onSuccess: function() {
						// console.log('标记私聊已读成功');
					},
					onFailed: function(error) {
						// 这里失败是因为压根没搜到对方的消息,所以没办法标记已读
						console.log("标记私聊已读失败", error);
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		width: 100%;
	}

	.chatInterface {
		.scroll-view {
			padding-bottom: 0px;

			.content {
				font-size: 20px;
			}
		}
	}

	.popup {
		box-sizing: border-box;
		width: 560rpx;
		padding: 30rpx 46rpx 46rpx;
		margin: 0 auto;
		color: #5553AA;
		position: relative;

		.titles {
			color: #5553AA;
			text-align: center;
			font-size: 28rpx;
			line-height: 2;
			font-weight: bold;
		}

		image {
			width: 28rpx;
			position: absolute;
			right: 30rpx;
			top: 30rpx;
		}

		text {
			font-size: 24rpx;
			line-height: 2;
			letter-spacing: 2rpx;
		}

		.btns {
			margin-top: 50rpx;
			display: flex;
			justify-content: space-between;

			.u-button {
				width: 180rpx;
			}
		}
	}

	.dealbox {
		display: flex;
		width: 100%;
		justify-content: space-between;
		padding: 10px 10px;
		box-sizing: border-box;
		background-color: #fff;
		position: fixed;
		z-index: 10;

		.imagebox {
			display: flex;

			.imgbox {
				width: 50px;
				height: 50px;
				border-radius: 10px;
			}

			.detailbox {
				margin-left: 10px;
				font-size: 12px;
				display: flex;
				flex-direction: column;
				justify-content: space-evenly;
				color: #A99CE6;

				:nth-child(1) {
					color: #8678CB;
					font-weight: bold;
				}
			}
		}

		.btnbox {
			display: flex;
			flex-direction: column-reverse;

			.u-button {
				width: 180rpx;
				height: 72rpx;
			}
		}
	}

	/* 对话样式 */
	.history-loaded {
		font-size: 26rpx !important;
		padding: 10rpx 0;

	}

	.load {
		font-size: 28rpx;
		padding: 10rpx 0;

	}

	.time-lag {
		color: #c2c2c2;
		font-size: 28rpx;
	}

	// .message-item-content {

	// 	&.self {

	// 		.order-content,
	// 		.content {
	// 			&::after {
	// 				content: '';
	// 				position: absolute;
	// 				right: -18rpx;
	// 				top: 20rpx;
	// 				border-top: 12rpx solid transparent;
	// 				border-bottom: 24rpx solid transparent;
	// 				border-left: 34rpx solid #fff;
	// 				z-index: 2;
	// 			}
	// 		}
	// 	}

	// 	&.other {

	// 		.order-content,
	// 		.content {
	// 			&::before {
	// 				content: '';
	// 				position: absolute;
	// 				left: -18rpx;
	// 				top: 20rpx;
	// 				border-top: 12rpx solid transparent;
	// 				border-bottom: 24rpx solid transparent;
	// 				border-right: 34rpx solid #fff;
	// 				z-index: 2;
	// 			}
	// 		}
	// 	}
	// }

	// .content {
	// 	position: relative;
	// }

	.order-content {
		// background: #fff !important;
		padding: 30rpx;
		box-sizing: border-box;
		// position: relative;
	}

	.order-img {
		background-position: center;
		background-repeat: no-repeat;
		background-size: 120% auto;
		width: 140rpx;
		height: 140rpx;
		background-color: #ddd;
	}

	.order-body {
		padding: 0 !important;
	}

	.order-name {}

	.avatar {
		border-radius: 100%;
		overflow: hidden;
		border: 2rpx solid #EABA5B;
	}

	.send-btn-box {
		background: #6C64D0 !important;
	}

	.icon-box-img {
		background-color: #fff;
		border-radius: 12rpx;

		image {
			width: 60rpx;
			height: 60rpx;
		}
	}

	.action-box {
		z-index: 11 !important;
		// padding-bottom: 20px;
	}


	// 语音
	.voice-mask {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		/* display: flex;
			flex-direction: column;
			justify-content: flex-end;
			align-items: center; */
		// background-color: rgba(0, 0, 0, 0.8);
	}

	.voice-bar {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -30%);
		/* width: 230rpx; */
		height: 150rpx;
		background-color: #51ff50;
		border-radius: 26rpx;
		margin-bottom: 220rpx;
	}

	.voiceDel {
		left: 80rpx;
		top: 50%;
		width: 170rpx !important;
		transform: translateX(0%);
		transform: translateY(-30%);
		background-color: red;
	}

	.voice-volume {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		border-radius: 50%;
		width: 140rpx;
		height: 140rpx;
	}

	.volumeDel {
		width: 80rpx;
	}

	.trangle-bottom {
		position: absolute;
		bottom: -38rpx;
		left: 50%;
		transform: translateX(-50%);
		border-width: 20rpx;
		border-style: solid;
		border-color: #51FF50 transparent transparent transparent;
	}

	.trangleDel {
		border-color: red transparent transparent transparent;
	}

	.voice-send {
		position: absolute;
		bottom: 0;
		width: 100%;
	}

	.voice-middle-wrapper {
		width: 100%;
		display: flex;
		position: relative;
		justify-content: space-between;
		align-items: flex-end;
		margin-bottom: 40rpx;
	}

	.voice-left-wrapper {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-end;
	}

	.cancel-del {
		display: none;
	}

	.delTip {
		display: block;
		color: #bfbfbf;
		margin: 0 22rpx 18rpx 0;
	}

	.voice-middle-inner {
		// display: flex;
		justify-content: center;
		align-items: center;
		background-color: rgba(0, 0, 0, 0.2);
		width: 140rpx;
		height: 140rpx;
		border-radius: 50%;
	}

	.close {
		transform: rotate(350deg);
		margin-left: 80rpx;
	}

	.bigger {
		width: 140rpx;
		height: 140rpx;
	}

	.to-text {
		transform: rotate(10deg);
		margin-right: 80rpx;
	}

	.close-icon {
		width: 140rpx;
		height: 140rpx;
		border-radius: 50%;
	}

	.wenimg {
		width: 140rpx;
		height: 140rpx;
		border-radius: 50%;
	}

	.wen {
		font-size: 40rpx;
		color: #bfbfbf;
	}

	.send-tip {
		position: absolute;
		left: 50%;
		bottom: 0rpx;
		transform: translate(-50%, 36%);
		color: #bfbfbf;
	}

	.sendTipNone {
		display: none;
	}

	.mask-bottom {
		position: relative;
		width: 100%;
		height: 190rpx;
		border-radius: 300rpx 300rpx 0 0;
		// background-image: linear-gradient(#949794, #e1e3e1);
		background-color: rgba(0, 0, 0, 0.2);

	}

	.mask-bottom .img {
		position: absolute;
		width: 60rpx;
		height: 60rpx;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		margin: auto;
	}
</style>